<template>
    <div class="tabBar flex-a">
        <div>
            <nut-badge :value="cartNum">
                <img style="width: 60rpx;height: 60rpx;" @click="jumpTo"
                    src="http://120.92.155.169:9095/uploadPath/2023/10/26/购物车20231026172353.png" alt="">
            </nut-badge>
        </div>
        <nut-button openType='share' class="share">
            <img style="width: 55rpx;height: 55rpx;"
                src="http://120.92.155.169:9095/uploadPath/2023/10/26/分享20231026171415.png" alt="">
        </nut-button>
        <nut-button open-type="contact" class="share contact" @click="onCatact" :send-message-title="title"
            :send-message-path="path" :send-message-img="img" :show-message-card="true" :session-from="content">
            <img style="width: 50rpx;height: 50rpx;"
                src="http://120.92.155.169:9095/uploadPath/2023/10/26/客服20231026171011.png" alt="">
        </nut-button>
        <nut-button shape="square" type="default" plain @click="show('cart')">加入购物车</nut-button>
        <nut-button shape="square" type="info" @click="show('buy')">立即购买</nut-button>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useShareAppMessage } from '@tarojs/taro';
import mitt from "./../../../../utils/mitt";
import { reactive, toRefs, onMounted } from 'vue';
import { Cart2, Share, Dongdong } from '@nutui/icons-vue-taro';
export default {
    components: {
        Cart2,
        Share,
        Dongdong
    },
    setup() {
        useShareAppMessage((res) => {
            var user = Taro.getStorageSync('user')
            if (res.from === 'button') {
                // 来自页面内转发按钮
                //console.log(res.target)
            }
            return {
                title: data.detail.goodsName + '',
                // desc: data.content,
                path: '/pages/index/index?userId=' + user.userId + '&goodsId=' + data.goodsId,
                imageUrl: data.img
            }
        })
        const data = reactive({
            goodsId: '',
            detail: {},
            cartNum: 0,
            title: '',
            content: '',
            img: '',
            path: '',
        });
        onMounted(() => {
            const router = useRouter();
            if (router.params.goodsId) {
                data.goodsId = router.params.goodsId
            }
            mitt.on("detail", (val) => {
                data.detail = val
                data.title = val.goodsName
                data.content = val.goodsIntro
                data.img = val.goodsCoverImg
                data.path = '/packageA/pages/productDetail/index?goodsId=' + val.goodsId
            })
            mitt.on("cartNum", (val) => {
                data.cartNum = val
            })
        });
        const show = (type) => {
            mitt.emit("show", [type, true]);
        }
        const jumpTo = () => {
            Taro.redirectTo({ url: '/pages/cartpage/index' });
        }
        const onCatact = () => {
            Taro.openCustomerServiceChat({
                extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc2e199bb356ead5c6' },
                corpId: 'ww959b513929f92e17',
                success: function (res) { },
                fail: function (res) {
                    console.log(res)
                }
            })
        }
        return {
            ...toRefs(data), show, jumpTo, onCatact
        }
    }
};
</script>


<style lang="scss" >
.tabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #FAFAFA;
    padding: 20rpx 10rpx 20rpx 35rpx;
    box-sizing: border-box;
    width: 100%;

    div {
        position: relative;
    }

    .nut-icon-share,
    .nut-icon-star-fill-n,
    .nut-icon-star-n {
        margin-left: 30rpx;
    }

    .nut-button--plain {
        margin: 0 10rpx 0 30rpx;
    }

    .nut-button {
        width: 200rpx;
        border-radius: 10rpx;
        white-space: nowrap;
    }

    .share {
        width: 90rpx !important;
        padding: 0 !important;
        border: none !important;
        background-color: transparent !important;
        position: relative;
        right: -20rpx;

        text {
            position: relative;
            left: -20rpx;
            top: 12rpx;
        }

        img {
            position: relative;
            left: -20rpx;
            top: 12rpx;
        }
    }

    .share.contact {
        width: 90rpx !important;
        right: -5rpx;
    }

    .nut-icon {
        transform: scale(0.9);
    }
}
</style>